<template class="">
  <div class="container">
    <!-- <el-divider direction="vertical" /> -->
    <el-radio-group
      size="small"
      v-model="flowStore.chartConfig.airportsChart.type"
      @change="handleChange()"
    >
      <el-radio-button value="TMA">全部</el-radio-button>
      <el-radio-button value="ZUUU">双流</el-radio-button>
      <el-radio-button value="ZUTF">天府</el-radio-button>
      <el-radio-button value="ZUMY">绵阳</el-radio-button>
    </el-radio-group>
    <el-divider direction="vertical" />
    <el-radio-group
      size="small"
      v-model="flowStore.chartConfig.airportsChart.dataGranularity"
      @change="handleGranularityChange()"
    >
      <el-radio-button :value="1">15分钟</el-radio-button>
      <el-radio-button :value="2">30分钟</el-radio-button>
      <el-radio-button :value="4">60分钟</el-radio-button>
    </el-radio-group>
    <!-- <el-divider direction="vertical" /> -->
  </div>
</template>

<script setup>
// import vue apis
import { ref, computed, nextTick, watch, onMounted, onUnmounted, h } from "vue";

// import stores
import useFlowStore from "@/store/flow.js";
import useCommonStore from "@/store/common.js";

const flowStore = useFlowStore();
const commonStore = useCommonStore();

const handleGranularityChange = () => {
  flowStore.chartConfig.airportsChart.dataStep =
    flowStore.chartConfig.airportsChart.dataGranularity;
  flowStore.chartConfig.airportsChart.dataInterval =
    flowStore.chartConfig.airportsChart.dataGranularity;
  handleChange();
};

const emits = defineEmits(["change"]);

const handleChange = () => {
  emits("change");
};
</script>

<style scoped>
.container {
  /* padding: 0 12px; */
  width: 450px;
  max-width: 450px;
  min-width: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
